<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ColorSharp | 颜色挑战</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366F1', // 靛蓝色调，代表智慧与创新
                        secondary: '#EC4899', // 粉色调，增加活力感
                        neutral: '#1F2937',
                        success: '#10B981',
                        error: '#EF4444',
                        'game-red': '#EF4444',
                        'game-blue': '#3B82F6',
                        'game-green': '#10B981',
                        'game-yellow': '#F59E0B',
                        'game-purple': '#8B5CF6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        display: ['Poppins', 'sans-serif']
                    },
                    animation: {
                        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .color-option {
                @apply px-4 py-3 rounded-xl text-white font-medium shadow-md transition-all duration-300 cursor-pointer hover:shadow-lg hover:-translate-y-1 transform hover:scale-105;
            }
            .glass {
                @apply bg-white/10 backdrop-blur-md border border-white/20;
            }
            .gradient-text {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
        }
    </style>
</head>

<body class="bg-gradient-to-br from-gray-900 to-neutral-800 min-h-screen font-sans text-white">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-20 w-80 h-80 bg-secondary/20 rounded-full blur-3xl"></div>
    </div>

    <div class="container mx-auto px-4 py-8 max-w-md relative z-10">
        <!-- 游戏标题 -->
        <div class="text-center mb-8">
            <h1 class="text-[clamp(2.5rem,5vw,3.5rem)] font-display font-bold gradient-text mb-2 tracking-tight">
                ColorSharp
            </h1>
            <p class="text-gray-300 text-lg">
                测试你的反应速度
            </p>
        </div>

        <!-- 游戏卡片 -->
        <div class="bg-neutral/60 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm border border-white/10">
            <!-- 游戏状态栏 -->
            <div class="px-6 py-4 flex justify-between items-center bg-white/5">
                <div class="flex items-center">
                    <div class="mr-6">
                        <div class="text-gray-400 text-sm">时间</div>
                        <div id="timer" class="text-2xl font-bold">30</div>
                    </div>
                    <div>
                        <div class="text-gray-400 text-sm">分数</div>
                        <div id="score" class="text-2xl font-bold">0</div>
                    </div>
                </div>
            </div>

            <!-- 游戏区域 -->
            <div class="p-6 md:p-8">
                <!-- 颜色文字显示区 -->
                <div class="flex justify-center items-center mb-10 h-40">
                    <h2 id="colorText" class="text-[clamp(3rem,10vw,4.5rem)] font-display font-bold text-center">红</h2>
                </div>

                <!-- 游戏说明 -->
                <p class="text-gray-300 text-center mb-8 italic">
                    选择与文字颜色相同的选项，而非文字内容！
                </p>

                <!-- 颜色选项区域 -->
                <div id="colorOptions" class="grid grid-cols-2 gap-4 mb-8">
                    <!-- 颜色选项将由JS动态生成 -->
                </div>

                <!-- 控制按钮 -->
                <div class="flex justify-center">
                    <button id="startBtn" class="bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-full font-bold shadow-lg btn-hover flex items-center">
                        <i class="fa-solid fa-play mr-2"></i>开始游戏
                    </button>
                    <button id="resetBtn" class="bg-white/10 hover:bg-white/20 text-white px-6 py-4 rounded-full font-medium shadow-md btn-hover hidden ml-4">
                        <i class="fa-solid fa-refresh mr-2"></i>重新开始
                    </button>
                </div>
            </div>
        </div>

        <!-- 结果弹窗 -->
        <div id="resultModal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden">
            <div class="bg-neutral/90 rounded-2xl p-8 max-w-md w-full mx-4 border border-white/10 backdrop-blur-md">
                <div class="text-center">
                    <div class="inline-block p-4 rounded-full bg-primary/20 mb-4">
                        <i class="fa-solid fa-trophy text-4xl text-primary"></i>
                    </div>
                    <h3 id="resultTitle" class="text-2xl font-bold mb-2">游戏结束!</h3>
                    <p id="resultMessage" class="text-gray-300 mb-6 text-lg">你的得分是: <span id="finalScore" class="font-bold">0</span></p>
                    
                    <div class="mb-8">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-gray-400">最高分</span>
                            <span id="highScore" class="font-bold">0</span>
                        </div>
                    </div>
                    
                    <button id="playAgainBtn" class="w-full bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-full font-bold shadow-lg btn-hover">
                        再玩一次
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 游戏配置
        const gameConfig = {
            timeLimit: 30,
            colors: [
                { name: '红', value: '#EF4444', className: 'game-red' },
                { name: '蓝', value: '#3B82F6', className: 'game-blue' },
                { name: '绿', value: '#10B981', className: 'game-green' },
                { name: '黄', value: '#F59E0B', className: 'game-yellow' },
                { name: '紫', value: '#8B5CF6', className: 'game-purple' },
            ],
            optionCount: 4
        };

        // 游戏状态
        let gameState = {
            score: 0,
            timeLeft: gameConfig.timeLimit,
            isPlaying: false,
            timerInterval: null,
            currentColor: null,
            correctOption: null,
            highScore: localStorage.getItem('colorChallengeHighScore') || 0
        };

        // DOM 元素
        const elements = {
            timer: document.getElementById('timer'),
            score: document.getElementById('score'),
            colorText: document.getElementById('colorText'),
            colorOptions: document.getElementById('colorOptions'),
            startBtn: document.getElementById('startBtn'),
            resetBtn: document.getElementById('resetBtn'),
            resultModal: document.getElementById('resultModal'),
            resultTitle: document.getElementById('resultTitle'),
            resultMessage: document.getElementById('resultMessage'),
            finalScore: document.getElementById('finalScore'),
            highScore: document.getElementById('highScore'),
            playAgainBtn: document.getElementById('playAgainBtn')
        };

        // 更新最高分显示
        function updateHighScore() {
            elements.highScore.textContent = gameState.highScore;
        }

        // 生成随机数
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // 打乱数组
        function shuffleArray(array) {
            return [...array].sort(() => Math.random() - 0.5);
        }

        // 更新计时器
        function updateTimer() {
            elements.timer.textContent = gameState.timeLeft;
            if (gameState.timeLeft <= 0) {
                endGame();
            } else {
                gameState.timeLeft--;
            }
        }

        // 生成新题目
        function generateNewQuestion() {
            const textContent = gameConfig.colors[getRandomInt(0, gameConfig.colors.length - 1)];
            gameState.currentColor = gameConfig.colors[getRandomInt(0, gameConfig.colors.length - 1)];
            
            elements.colorText.textContent = textContent.name;
            elements.colorText.className = `text-[clamp(3rem,10vw,4.5rem)] font-display font-bold text-center text-${gameState.currentColor.className}`;
            
            // 生成选项
            const options = [gameState.currentColor];
            while (options.length < gameConfig.optionCount) {
                const randomColor = gameConfig.colors[getRandomInt(0, gameConfig.colors.length - 1)];
                if (!options.some(option => option.name === randomColor.name)) {
                    options.push(randomColor);
                }
            }
            
            // 打乱选项顺序
            const shuffledOptions = shuffleArray(options);
            
            // 清空并添加选项
            elements.colorOptions.innerHTML = '';
            shuffledOptions.forEach(option => {
                const button = document.createElement('button');
                button.className = `color-option w-full text-center ${option.className}`;
                button.textContent = option.name;
                button.addEventListener('click', () => checkAnswer(option));
                elements.colorOptions.appendChild(button);
            });
        }

        // 检查答案
        function checkAnswer(selectedOption) {
            if (!gameState.isPlaying) return;
            
            if (selectedOption.name === gameState.currentColor.name) {
                // 答对了
                gameState.score += 10;
                elements.score.textContent = gameState.score;
                elements.colorText.classList.add('animate-pulse-fast');
                setTimeout(() => {
                    elements.colorText.classList.remove('animate-pulse-fast');
                    generateNewQuestion();
                }, 300);
            } else {
                // 答错了
                elements.colorText.classList.add('text-error');
                setTimeout(() => {
                    elements.colorText.classList.remove('text-error');
                    generateNewQuestion();
                }, 300);
            }
        }

        // 开始游戏
        function startGame() {
            gameState = {
                score: 0,
                timeLeft: gameConfig.timeLimit,
                isPlaying: true,
                timerInterval: setInterval(updateTimer, 1000),
                currentColor: null,
                correctOption: null,
                highScore: gameState.highScore
            };
            
            elements.score.textContent = '0';
            elements.timer.textContent = gameConfig.timeLimit;
            elements.startBtn.classList.add('hidden');
            elements.resetBtn.classList.remove('hidden');
            
            generateNewQuestion();
        }

        // 结束游戏
        function endGame() {
            clearInterval(gameState.timerInterval);
            gameState.isPlaying = false;
            
            // 更新最高分
            if (gameState.score > gameState.highScore) {
                gameState.highScore = gameState.score;
                localStorage.setItem('colorChallengeHighScore', gameState.highScore);
                elements.resultTitle.textContent = '新纪录!';
            } else {
                elements.resultTitle.textContent = '游戏结束!';
            }
            
            elements.finalScore.textContent = gameState.score;
            updateHighScore();
            elements.resultModal.classList.remove('hidden');
        }

        // 事件监听
        elements.startBtn.addEventListener('click', startGame);
        elements.resetBtn.addEventListener('click', startGame);
        elements.playAgainBtn.addEventListener('click', () => {
            elements.resultModal.classList.add('hidden');
            startGame();
        });

        // 初始化
        updateHighScore();
    </script>
</body>

</html> 